<!--
 * @Author: your name
 * @Date: 2020-07-08 14:14:17
 * @LastEditTime: 2020-07-09 16:37:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
--> 

<template>
  <div class="pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      @current-change="current_change"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0, //总条数
      pagesize: 6, //每页数据条数
      currentPage: 1 //当前页
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.$eventBus.$emit("currentPage", this.currentPage);
    }
  }
};
</script>

<style>
.pagination {
  position: absolute;
}
.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next{

  border: 1px solid #d9d9d9;
  background-color: #fff;
}
.el-pagination.is-background .el-pager li{
  border: 1px solid #d9d9d9;
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #1890ff;
}
.el-pagination.is-background .el-pager li.active {
  color: #1890ff;
  cursor: default;
  border: 1px solid #1890ff;
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:hover {
  color: #1890ff;
  border: 1px solid #1890ff;
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #1890ff;
  border: 1px solid #1890ff;
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #fff;
  color: #1890ff;
  border: 1px solid #1890ff
}
</style>